import React, { useEffect } from 'react';

function append(content, container = 'content', tagname = 'p') {
  const tag = document.createElement(tagname);
  const text = document.createTextNode(content);
  tag.appendChild(text);
  document.getElementById(container).appendChild(tag);
}

function proxyArray() {
  const list = [];

  const listProxy = new Proxy(list, {
    set(target, property, value) {
      append(`set ${property} ${value}`);
      Object.assign(target, {
        [property]: value,
      });
      return true;
    },
  });

  listProxy.push(100);
}

export default function Async() {
  useEffect(proxyArray, null);

  return (
    <div id="content">
      <p>proxy</p>
    </div>
  );
}
